@use '@material/list' as list;
@use '@material/list/evolution-mixins' as evolution-mixins;

:host {
  $border: var(--mdc-theme-border);
  $text: var(--mdc-theme-on-surface-variant);

  --mdc-list-single-line-height: 48px;
  --mdc-list-two-line-height: 72px;

  // --- web component --- //

  @include list.deprecated-divider-color($border);
  @include evolution-mixins.divider-color($border);

  // Menu
  .mdc-menu .mdc-deprecated-list {
    @include list.deprecated-item-primary-text-ink-color($text);
  }

  // --- non-web component --- //

  .mdc-list {
    @include evolution-mixins.one-line-item-height(
      var(--mdc-list-single-line-height, 48px)
    );
    @include evolution-mixins.two-line-item-height(
      var(--mdc-list-two-line-height, 72px)
    );

    .mdc-list-item {
      height: var(--mdc-list-single-line-height, 48px);
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    &.mdc-list--two-line .mdc-list-item {
      height: var(--mdc-list-two-line-height, 72px);

      .mdc-list-item__primary-text {
        display: block;
        margin-bottom: -8px;
      }
    }
  }

  .mdc-deprecated-list.mdc-deprecated-list--avatar-list
    .mdc-deprecated-list-item__graphic,
  cv-list-item[graphic='avatar'] cv-icon[slot='graphic'] {
    background-color: var(--mdc-theme-surface-neutral-highlight);
  }

  cv-list-item,
  cv-check-list-item,
  .mdc-list,
  .cv-list-item,
  .mdc-deprecated-list,
  .mdc-deprecated-list-item__text,
  .mdc-list-item__primary-text {
    font-family: var(--mdc-typography-font-family);
    font-size: var(--mdc-typography-body1-font-size);
    font-weight: var(--mdc-typography-body1-font-weight);
    line-height: var(--mdc-typography-body1-line-height);
  }

  cv-list-item {
    span[slot='secondary'] {
      cv-icon {
        font-size: 1rem;
        margin-right: 0.25rem;
        position: relative;
        top: 3px;
      }

      &.status-caution {
        color: var(--mdc-theme-caution);
      }

      &.status-negative {
        color: var(--mdc-theme-negative);
      }

      &.status-positive {
        color: var(--mdc-theme-positive);
      }
    }
  }

  .beta-list-item {
    --mdc-theme-primary: #{var(--mdc-theme-surface-caution)};
  }

  // Divider
  [divider] {
    border-bottom: 1px solid;
    list-style: none;
    border-color: var(--mdc-theme-border, rgba(black, 0.12));
  }
}
